<!--展示招工信息-->
<template>
  <el-container>
    <el-header style="width: 1200px;height: 100%;margin: 0 auto;background-color: white">
      <div class="lookwork_div">
        <!-- 搜索框开始   -->
        <div style="display: flex;">
          <div style="width: 850px;border-radius: 3px;border: 2px solid #0092FF;display: flex">
            <el-select v-model="value" style="width: 100px" placeholder="请选择">
              <el-option
                  v-for="item in location"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>
            <p style="font-size: 30px;margin: 0px 10px;font-weight: normal;color: rgba(0,0,0,0.1)">|</p>
            <input class="input_text" type="text" placeholder="搜索你想要的工作">
            <el-button type="primary" v-model="input" @click="searchForWork(input)" class="el-icon-search">搜索
            </el-button>
          </div>
          <el-button type="primary" style="margin-left: 20px" @click="locationReleaserecuit()"
                     class="el-icon-s-promotion el-button_sou">发布招工
          </el-button>
        </div>
        <!-- 搜索框结束   -->

        <!--  行业分类开始  -->
        <div style="text-align: left;display: flex">
          <span>行&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;业：</span>
          <div class="set_type_div">
            <p v-for="item in IndustryList">
              <a style="text-decoration: none;color: #666666" @click="selectIndustry(item)" href="javascript:void(0)">
                {{ item.detailName }}
              </a>
            </p>
          </div>
        </div>
        <el-divider/>
        <!--  行业分类结束  -->

        <!-- 工种开始   -->
        <div v-if="workInfo.length!=0">
          <div style="text-align: left;display: flex;">
            <span>工&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;种：</span>
            <div class="set_type_div">
              <p v-for="item in workInfo">
                <a style="text-decoration: none;color: #666666" @click="selectWork(item)" href="javascript:void(0)">
                  {{ item.detailName }}
                </a>
              </p>
            </div>
          </div>
          <div style="display: flex;flex-wrap: wrap;width: 1000px;
           height: 100%;
           line-height: 50px;
           margin-left: 100px;
           background-color: rgba(0,0,0,0.1)"
               v-if="WorkList.length!=0">
            <div v-for="item in WorkList" style="margin-left: 10px" @click="workSelectedIndustry(item)">
              <a class="work_font_gbColor" href="javascript:void(0)">
                {{ item.detailName }}
              </a>
            </div>
          </div>
          <el-divider/>
        </div>

        <!-- 工种结束   -->

        <!--    招工城市开始   -->
        <div style="text-align: left;display: flex">
          <span style="line-height: 40px">招工城市：</span>
          <el-cascader
              v-model="formData.district"
              :props="props"
              placeholder="请选择区域"
              :options="DistrictList" :show-all-levels="false"></el-cascader>
        </div>
        <el-divider/>
        <!--    招工城市结束   -->

        <!--  已选内容开始  -->
        <div v-if="selectedwork.length!=0">
          <div style="text-align: left;display: flex">
            <div style="width: 100px">
              <span style="line-height: 40px;width: 100px;display: block">已选内容：</span>
            </div>
            <div style="margin-top: 0px;width:20px;margin-left: 10px;box-sizing: border-box;display: flex">
              <el-tag
                  v-for="(item,i) in selectedwork"
                  :key="i"
                  style="margin-left: 10px"
                  disable-transitions="true"
                  closable
                  @close="handleClose(i)"
                  :type="item.detailName">
                {{ item.detailName }}
              </el-tag>
            </div>
            <div style="margin-left: 900px">
              <el-button @click="locadeleteAll()">清空所有选项</el-button>
            </div>
          </div>
          <el-divider/>
        </div>


        <!--  已选内容结束  -->

        <!--    信息类型开始   -->
        <div style="text-align: left;display: flex">
          <span style="line-height: 40px">信息类型：</span>
          <div class="set_type_div" style="margin-top: 10px">
            <p v-for="item in infoType">
              <a style="text-decoration: none;color: #666666" href="javascript:void(0)">
                {{ item.value }}
              </a>
            </p>
          </div>
        </div>
        <!--    信息类型结束   -->
      </div>
    </el-header>
    <el-footer style="background-color: #F5F6FA;height: 100%;">
      <router-view/>
    </el-footer>
  </el-container>


</template>

<script>
export default {
  name: "LookWorkView",
  data() {
    return {
      input: "",
      location: [
        {value: "找工作"},
        {value: "找工人"},
      ],
      value: "找工作",
      infoType: [
        {value: '不限'},
        {value: '实名'},
        {value: '企业实名'},
      ],
      IndustryList: [{id: '', detailName: '', peId: ''}],
      WorkList: [],
      workInfo: [],
      selectedwork: [],
      index: 0,
      selectedRow: "",
      selectedColum: 0,

      daohang: {tab_a: ""},
      tab_a: "",
      DistrictList: [],
      formData: {
        district: ''
      },
      props: {
        label: "district",
        value: "id",
        children: "list",
      }
    }
  },
  methods: {
    selectIndustry(item) {
      this.selectedwork = [];
      this.selectedwork.push(item);
      this.workInfo = item.list;
      this.WorkList = []
      this.index = 1;
    },

    selectWork(item) {

      if (this.index == 1) {
        this.selectedwork.pop();
        this.index = 0;
      }
      this.selectedRow = item.industry;
      this.selectedColum = item.id;

      this.isInsertType(item)
      if (item.list.length > 1) {
        this.WorkList = item.list;
      } else {
        this.WorkList = [];
      }


    },

    locadeleteAll() {
      this.selectedwork = [];
      if (this.selectedwork.length == 0) {
        this.WorkList = []
        this.workInfo = []
      }
    },

    handleClose(i) {
      this.selectedwork.splice(i, 1);
      if (this.selectedwork.length == 0) {
        this.WorkList = []
        this.workInfo = []
      }
    },

    workSelectedIndustry(item) {
      for (let i = 0; i < this.selectedwork.length; i++) {
        if (this.selectedwork[i].id == this.selectedColum) {
          this.selectedwork.splice(i, 1);
        }
      }
      this.isInsertType(item)
    },

    isInsertType(item) {
      let isView = true;
      for (let i = 0; i < this.selectedwork.length; i++) {
        if (item == this.selectedwork[i]) {
          isView = false;
        }
      }

      if (isView) {
        if (this.selectedwork.length < 7) {
          this.selectedwork.push(item);
        } else {
          this.$message.error("只能选7个");
        }
      }
    },

   //路由跳转
    locationReleaserecuit() {
      this.$router.push('/member/releaserecuit');
    },

    searchForWork(input) {
      if (this.value == "找工人") {
        this.$router.push('/');
        return;
      }
      // this.$router.push('/lookwork/recruitcard/input='+input);
    },

  },
  mounted() {

    this.axios.get('http://localhost:36000/v1/lookwork/industry')
        .then((response) => {
          if (response.data.code == 20000) {
            this.IndustryList = response.data.data;
          }
        })

    this.axios.get('http://localhost:36000/v1/lookwork/district')
        .then((response) => {
          if (response.data.code == 20000) {
            this.DistrictList = response.data.data;
          }
        })
  }
}
</script>

<style scoped>

.work_font_gbColor {
  text-decoration: none;
  color: #666666;
  display: block;
}

.work_font_gbColor:hover {
  color: white;
  background-color: #0092FF;
}

.el-footer > div {
  margin-bottom: 40px;
}

.tab_a {
  overflow: hidden;
}

.tab_a a {
  display: inline-block;
  margin: 20px 15px;
  width: 20px;
  box-sizing: border-box;
  height: 20px;
  line-height: 20px;
  text-decoration: none;
  color: #666666;
  border: 1px solid #666666;
}

.tab_a a:hover {
  color: white;
  background-color: #0092FF;
}




.set_type_div {
  display: flex;
  flex-wrap: wrap;
}

.set_type_div p a:hover {
  color: #0092FF !important;
}

.set_type_div p {
  margin-left: 10px;
  margin-right: 10px;
  margin-bottom: 8px;
  font-size: 15px
}

.lookwork_div > div {
  margin-top: 20px;
}

.input_text {
  padding: 0px 10px;
  box-sizing: border-box;
  width: 570px;
  border: none;
  font-size: 15px;
  outline: none;
  color: #666666;
}

/deep/ .el-input__inner {
  border: none;
}

/deep/ .el-button {
  border-radius: 0px;
  font-size: 15px;
  width: 155px;
}

/deep/ .el-button_sou {
  border-radius: 5px;
  width: 155px;
  font-weight: bold;
  font-size: 17px;
}
</style>